import React, { useState, lazy, Suspense } from 'react';

// import ComingSoon from './ComingSoon';
// import NowPlaying from './NowPlaying';

const ComingSoon = lazy(() => import('./ComingSoon'));
const NowPlaying = lazy(() => import('./NowPlaying'));

const App = () => {
  const [type, setType] = useState(1);
  return (
    <div>
      <h1>App</h1>
      <button
        type="button"
        onClick={() => setType(1)}
      >
        正在热映
      </button>
      <button
        type="button"
        onClick={() => setType(2)}
      >
        即将上映
      </button>
      <div>
        <Suspense fallback={<div>正在加载中...</div>}>
          {type === 1 ? <NowPlaying /> : <ComingSoon />}
        </Suspense>
      </div>
    </div>
  );
};

export default App;
